/* 文件列表 */
<template>
	<div class="file-list">
		<div
			class="file"
			v-for="file in fileList"
			:key="file.key"
		>
			<el-image
				class="type-icon"
				style="width: 40px; height: 40px;"
				:src="fileIcon(file)"
				fit="contain"
				@click="onclickFile(file)"
			/>
			<div class="name">
				{{fileName(file.key)}}
			</div>
			<el-button
				v-if="file.type !== 'folder'"
				type="primary"
				size="mini"
				round
				@click="onclickCopyUrl(file.key)"
			>
				复制链接
			</el-button>
			<!-- <el-button
				type="danger"
				icon="el-icon-delete"
				size="mini"
				circle
				@click="oncliclDel(file.key)"
			/> -->
		</div>
		<div style="float: right;">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="pageSize"
				:total="this.files.length"
				:current-page="pageNum"
				@current-change="pageNum=$event"
			/>
		</div>
	</div>
</template>

<script>
import { basePath, delFile } from '@exploit/utils/file'
import { copyData } from '@/utils/tools'
export default {
  props: {
    files: {
      type: Array,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1
    }
  },
  computed: {
    fileList() {
      const start = (this.pageNum - 1) * this.pageSize

      return this.files.slice(start, start + this.pageSize)
    },
    fileName() {
      return function(key) {
        const nameArr = key.split('/').filter(item => item)

        return nameArr[ nameArr.length - 1 ]
      }
    },
    fileIcon() {
      return function(file) {
        if (file.type === 'img') {
          return `https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/${ file.key }`
        } else {
          return `https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/system_static/imgs/fileType/${ file.type }.png`
        }
      }
    }
  },
  methods: {
    /**
     * 获取文件绝对路径
     * @param {String} key 相对路径
     */
    getCompletePath(key) {
      return '	https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/' + key
    },
    /**
     * 双击文件，根据不同类型执行不同操作
     * @param {File} file
     */
    onclickFile(file) {
      switch (file.type) {
        case 'folder':
          this.$emit('onclickFolder', file.key.replace(basePath, ''))
          break
        default:
          window.open(this.getCompletePath(file.key))
      }
    },
    /**
     * 点击复制链接
     */
    onclickCopyUrl(key) {
      const url = this.getCompletePath(key)

      copyData(url.trim())

    },
    /**
     * 点击删除
     */
    oncliclDel(key) {
      this.$confirm(`确认删除${ this.fileName(key) }?`, async() => {
        await delFile(key)
        this.$warn('文件已删除')
        this.$emit('refresh')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.file-list {
  padding: 10px 0 30px;

  .file {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: $radiusMiddle;
    box-shadow: $shadow2;

    &:hover {
      background-color: rgba($color: #000000, $alpha: 0.1);
    }

    .type-icon {
      cursor: pointer;
    }

    .name {
      flex: 1;
      margin: 0 15px;
      font-size: $sSmall;
    }
  }
}
</style>
